<template>
  <div class="wrapper">
    <div class="topWrapper">
      <span class="iconfont iconjiantou2" @click="haedleBack"></span>
      <div class="searchWrapper">
        <span class="iconfont iconsearch"></span>
        <input type="text" placeholder="请输入搜索关键字" v-model="keyword" @keydown.enter="headleSearch" />
      </div>
      <div class="btnSearch" @click="headleSearch">搜索</div>
    </div>
    <div class="history" v-if="postItemList.length==0">
      <h3>历史记录</h3>
      <div class="list">
        <div
          class="item"
          v-for="(item,index) in history"
          :key="index"
          @click="historySearch(item)"
        >{{item}}</div>
      </div>
    </div>
    <div class="hotHistory" v-if="postItemList.length==0">
      <h3>热门搜索</h3>
      <div class="hotList">
        <div class="item">阿信</div>
        <div class="item">美女</div>
        <div class="item">关晓彤</div>
      </div>
    </div>
    <div class="postLists">
      <PostItem v-for="item in postItemList" :key="item.id" :postData="item"></PostItem>
    </div>
  </div>
</template>

<script>
import PostItem from "../components/postItem";
export default {
  components: {
    PostItem,
  },
  data() {
    return {
      keyword: "",
      postItemList: [],
      history: [],
    };
  },
  watch: {
    //   监听关键字
    keyword(newval) {
      if (!newval) {
        this.postItemList = [];
      }
    },
    // 监听历史记录
    history() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  //   刷新是否有本地记录，拿记录回来
  created() {
    if (localStorage.getItem("history")) {
      this.history = JSON.parse(localStorage.getItem("history"));
    }
  },
  methods: {
    //   搜索事件
    headleSearch(keyword) {
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res.data);
        this.postItemList = res.data.data;
        // 搜索记录
        if (this.history.indexOf(this.keyword) == -1) {
          this.history.unshift(this.keyword);
        }
      });
    },
    // 历史事件
    historySearch(keyword) {
      this.keyword = keyword;
      this.headleSearch();
    },
    // 箭头回退事件
    haedleBack() {
      // 如果当前列表结果有数据，清空关键字，返回历史
      if (this.postItemList.length > 0) {
        this.keyword = "";
      } else {
        this.$router.back();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  padding: 10/360 * 100vw 20/360 * 100vw;
  .topWrapper {
    display: flex;
    align-items: center;
    .searchWrapper {
      flex: 1;
      line-height: 30/360 * 100vw;
      border: 1px solid #bbb;
      border-radius: 16/360 * 100vw;
      margin: 0 12/360 * 100vw;
      .iconsearch {
        margin-left: 10/360 * 100vw;
      }
      input {
        margin-left: 10/360 * 100vw;
        border: none;
        outline: none;
      }
    }
  }
  .history {
    margin: 16/360 * 100vw 0;
    border-bottom: 1px solid #e4e4e4;
    .list {
      display: flex;
      flex-wrap: wrap;
    }
  }

  h3 {
    margin-bottom: 8/360 * 100vw;
    font-size: 14/360 * 100vw;
    font-weight: normal;
  }
  .item {
    font-size: 12/360 * 100vw;
    margin: 6/360 * 100vw;
    color: #999;
  }
}
</style>